<template>
  <view class="snowCircle">
    <child-header-bar :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
    <view class="snowCircle-content" :style="[{ top: top + 'px' }]">
      <view class="activity">
        <view class="tabs">
          <text
              v-for="(item, index) in tabs"
              :key="item.dictValue"
              :class="{ active: tabIndex === index }"
              @tap="changeTab(item,index)"
          >
            {{ item.dictLabel }}
          </text>
        </view>
        <view class="masonry">
          <view
              class="item"
              v-for="item in circleDataList"
              :key="item.circleId"
              @tap="newDetail(item.circleId)">
            <image class="imgCover" mode="widthFix" :src="getImage(item.titleImg)" />
            <view class="characters">
              <text>{{ item.title }}</text>
              <view class="isContent">
                <view class="flexContent">
                  <image class="userImg"  :src="item.avatar" />
                  <!--                    <image class="userImg" mode="scaleToFill" src="../../static/index/jl.png" />-->
                  <text class="userName">{{ item.userName }}</text>
                </view>
				<!-- 
                <view class="flexContent">
                  <image class="clickIcon" mode="scaleToFill" src="../../static/skiTubing/snowList_clickIcon.png" />
                  <text class="userDate">{{ item.clickNum }}</text>
                </view>
-->
              </view>
            </view>
          </view>
	
        </view>
        <view class="addPlus" @tap="addNewCircleData">
          <image class="addPlusImg" src="../../static/skiTubing/snowList_addPlus.png" mode="scaleToFill"></image>
        </view>
      </view>
    </view>
    <zdy-tabbar :current-page="1"></zdy-tabbar>
  </view>
</template>
<script>
export default {
  data() {
    return {
      /* userId判断用户是否登录*/
      userId: 0,
      /* 页面标题*/
      childTitle: '雪圈',
      /* 导航栏高度*/
      top: 150,
      /* 顶部tabs切换列表*/
      tabs: [],
      /* 顶部tabs切换参数*/
      tabIndex: 0,
      dictValue: "NOVICE",
      /* 数据列表*/
      circleDataList:[],
	  param: {
	    pageSize: 10,
	    pageNum: 1,
		circleType:"NOVICE"
	  },
    };
  },
    onReachBottom() {
      this.param.pageNum++;
	  console.log(this.dictValue)
	this.param.circleType=this.dictValue
      this.getNewList()
    },
  onShow() {
	  this.param.pageSize = 10
	      this.param.pageNum = 1
	  this.circleDataList=[]
	  
	  
    this.userId = uni.getStorageSync('userId')
    
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
let curRoute = routes[routes.length - 1].route //获取当前页面路由
console.log("当前页面的路由",curRoute);
let curParam = routes[routes.length - 1].options; //获取路由参数
console.log("当前页面的参数",curParam.type);
	if(Object.keys(curParam).length===0)
	{
			this.getCircleTypeList();
	}
	else if(curParam.type=="gl")
	{		this.getCircleTypeList();
		   this.changeTab1()
		  routes[routes.length - 1].options.type={}
	}
	else
	{
		this.getCircleTypeList();
	}
  },
  methods: {
	  		onShareAppMessage() {
	  return {
	      title: '雪圈',
	      imageUrl: this.img,
	    }
	  },
	  onShareTimeline() {
	    return {
	      title: '雪圈',
	      imageUrl: this.img,
	    }
	  },
    // 动态接收导航栏高度
    getMarginTop(marginTop) {
      this.top = marginTop ? marginTop : 150;
    },
    /* 顶部切换方法*/
    changeTab(item,index) {
		console.log(item.dictValue)
      this.tabIndex = index;
      this.param.circleType = item.dictValue
	  this.dictValue=item.dictValue
	        this.param.pageSize = 10
	        this.param.pageNum = 1
	  	this.circleDataList=[]
      this.getNewList();
    },
	changeTab1() {
	  this.tabIndex = 2;
		this.param.circleType = item.dictValue
	  this.getNewList();
	},
    /* 获取顶部切换雪圈列表类型*/
    getCircleTypeList(){
      let _this = this
      wx.request({
        url: this.$httpApi.install.getCircleType,
        method: 'GET',
        success(res) {
          console.log(res.data.data);
          _this.tabs = res.data.data
          _this.getNewList();
        },
      })
    },
    /* 详情页面跳转*/
    newDetail(id){
      console.log("详情页面跳转>>",id)
      uni.navigateTo({
        url: `/myPackageA/pages/skiTubingInfo/skiTubingInfo?id=${id}`,
      })
    },
    /* 获取雪圈列表数据*/
    getNewList(){
	console.log('当前',this.param)
      let _this = this
      wx.request({
        url: this.$httpApi.install.circleList,
        method: 'GET',
        data: this.param,
		success(res) {
			console.log(res)
		  if (res.data.code == 200) {
		    if (res.data.rows.length == 0) { //没有数据
		      _this.loadingType = 2;
		      return;
		    }
		    _this.totalPage = Math.ceil(res.data.total / _this.param.pageSize)
		    // 不足分页数量
				console.log('总页数', _this.totalPage )
				console.log('当前页', _this.param.pageNum )
		    if (_this.param.pageNum <=_this.totalPage) {
		      	_this.circleDataList = _this.circleDataList.concat(res.data.rows);
		    } else {
		    
		    }
		
		  } else {
		    console.log(res.msg)
		  }
		}
      })
    },

    /* 回显封面图片*/
    getImage(titleImg){
      if ( titleImg && titleImg.includes(";") ){
        let imageList = titleImg.split(";");
        return imageList[0];
      }else {
        return titleImg
      }
    },
    /* 新增雪圈*/
    addNewCircleData() {
      if (this.userId == 0 || this.userId == '' || this.userId == null) {
        uni.navigateTo({
          url: '/pages/login/index',
        })
      } else {
        uni.navigateTo({
          url: '/myPackageA/pages/skiTubingInfo/addNewSnowCircle',
        })
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.snowCircle-content {
  position: absolute;
  width: 100%;
  background-color: #f8fafe;
  /* padding: 0 30rpx; */
}

.activity {
  background-color: #f8fafe;
  width: 100%;
}

.tabs {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  height: 40rpx;
  line-height: 100rpx;
}

.tabs text {
  font-size: 30rpx;
  color: #a4a4a4;
  margin-right: 60rpx;
}
.tabs text:nth-child(1) {
  margin-left: 30rpx;
}

.tabs text:last-child {
  margin-right: 0rpx;
}

.tabs .active {
  font-size: 36rpx;
  color: #303030;
  font-weight: 500;
  position: relative;
}

.tabs .active::after {
  position: absolute;
  left: 50%;
  top: 80rpx;
  font-weight: 500;
  bottom: -34rpx;
  width: 40rpx;
  height: 6rpx;
  background-color: #303030;
  border-radius: 20%;
  content: '';
  transform: translate(-50%);
}

.masonry {
  width: 100%; // 默认宽度
  margin: 34px 0px;
  padding: 0 8px;
  columns: 2; // 默认列数
  column-gap: 10px; // 列间距
  background-color: #f8fafe;
  box-sizing: border-box;
  border-top-left-radius: 20rpx !important; /* 左上角 */
  border-top-right-radius: 20rpx !important; /* 右上角 */
}

.item {
  width: 100%;
  break-inside: avoid;
  border-radius: 20rpx;
  margin-bottom: 10px;
  background-color: #fff;
}

.imgCover{
  width: 100%;
  border-top-left-radius: 20rpx !important; /* 左上角 */
  border-top-right-radius: 20rpx !important; /* 右上角 */
}
//.item image {
//  width: 100%;
//  border-top-left-radius: 20rpx !important; /* 左上角 */
//  border-top-right-radius: 20rpx !important; /* 右上角 */
//}

.characters {
  padding-left: 16rpx;
  padding-right: 18rpx;
}
.item text {
  padding: 8px 0;
  font-size: 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  color: #464646;
  line-height: 30rpx;
}

.isContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .flexContent{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    image{
      margin-right: 8rpx;
    }
    .userImg{
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      background: #6E6E6E;
      opacity: 1;
    }
    .userName {
      font-size: 20rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #303030;
    }

    .clickIcon{
      width: 40rpx;
      height: 40rpx;
    }
    .userDate {
      font-size: 18rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #595959;
    }
  }

}

.addPlus {
  position: fixed;
  bottom: 190rpx;
  right: 10rpx;
  width: 116rpx;
  height: 116rpx;
  background: #303030;
  border-radius: 50%;
  opacity: 0.63;
  .addPlusImg {

    width: 50rpx;
    height: 50rpx;
    margin-left: 33rpx;
    margin-top: 33rpx;
  }
}
</style>
